<template lang="html">
  <label :class="`${prefixCls}-wrapper`">
    <span :class="checkboxClass">
      <span
        :class="`${prefixCls}__inner`"
        @click="toggle"></span>
    </span>
  </label>
</template>

<script>
export default {
    name: 'tree-table-checkbox',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
        indeterminate: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            prefixCls: 'tree-table-checkbox'
        };
    },
    computed: {
        checkboxClass() {
            return [
                `${this.prefixCls}`,
                {
                    [`${this.prefixCls}--disabled`]: this.disabled,
                    [`${this.prefixCls}--checked`]: this.value,
                    [`${this.prefixCls}--indeterminate`]: this.indeterminate
                }
            ];
        }
    },
    methods: {
        toggle() {
            if (this.disabled) {
                return false;
            }
            const value = !this.value;
            this.$emit('input', value);
            return this.$emit('on-change', value);
        }
    }
};
</script>

<style lang="less" src="./Checkbox.less"></style>
